<template>
    <div class="mime-info-detail-wrap padding-12">
        <h2 class="mime-info-detail-title text-align-c">{{detailTitle}}</h2>
        <p class="seeNumCount">
            <label class="seeNumCount-icon"></label>
            <van-col span="16">
                <div class="display-table">
                    <div class="display-table-cell">
                        <van-row>
                            <van-col span='16' class="van-ellipsis">
                                <p>发布时间：{{created_at}}</p>
                            </van-col>
                            <van-col span='8' class='text-align-r'>
                                <p>
                                    <label class="list-icon-see info-list-icon-see"></label>
                                    {{detailCount}}人阅读
                                </p>
                            </van-col>
                        </van-row>
                    </div>
                </div>
            </van-col>
        </p>
        <div class="mime-info-detail-content detail-content" v-html="detailContent"></div>
        <div class="mime-info-detail-footer">
          
        </div>
    </div>
</template>

<script>
  import ajax from '../../module/ajax/public'
    export default {
      name: "ArticleDetail",
      mounted(){
        this.id = this.$route.query.id
        this.getInfoData()
      },
      data(){
        return{
          id:1,
          created_at:'',
          detailTitle:'',
          detailContent:'',
          detailCount:null
        }
      },
      methods:{
        getInfoData(){
          ajax.doAction({
            url: '/article/'+this.id,
            type: 'GET',
            successCallback:(data)=>{
              // console.log(data);
              let datas = data.data
              this.created_at = datas.created_at
              this.detailTitle = datas.title
              this.detailContent = datas.content
              this.detailCount = datas.clicks > 9999 ? (datas.clicks/10000).toFixed(1) + '万' : datas.clicks
            },
            errorCallback: (data)=> {
              console.log('请求失败')
            }
          });
        }
      }
    }
</script>

<style scoped>
.mime-info-detail-wrap .mime-info-detail-title{
  font-size: 18px;
  font-weight: bold;
  line-height: 28px;
}
.mime-info-detail-wrap .detail-content {
  padding: 20px 0;
}
.mime-info-detail-wrap .mime-info-detail-footer p{
  color: #9A9A9A;
  font-size: 13px;
  font-weight: lighter;
}
.mime-info-detail-wrap .seeNumCount{
  font-size: 12px;
  color: #38B17B;
  font-weight: lighter;
  margin-top: 15px;
  margin-bottom: 5px;
}
.mime-info-detail-wrap .seeNumCount-icon{
  display: inline-block;
  /* background: url("../../../static/images/reading2.png") no-repeat center; */
  width: 11px;
  height: 12px;
  background-size: 100% 100%;
  margin-right: 5px;
}
</style>
